<template>
  <!-- 住户管理 -->
  <div class="home">
    <div class="header">
      <div class="toper">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>资料管理</el-breadcrumb-item>
          <el-breadcrumb-item>住户管理</el-breadcrumb-item>
          <p>住户管理</p>
        </el-breadcrumb>
      </div>
      <div class="divLine"></div>

      <!-- 查询框 -->
      <!-- 第一行 -->
      <div class="boxFirst">
        <div class="boxOne">
          <div class="textUserT">住户类型</div>
          <div class="selectorOne">
            <el-select
              v-model="Type"
              class="m-2"
              placeholder="请选择住户类型"
              size="large"
            >
              <el-option
                v-for="item in userT"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="boxTwo">
          <div class="textUserS">小区名称</div>
          <div class="selectorTwo">
            <el-select
              v-model="State"
              class="m-2"
              placeholder="请选择小区名称"
              size="large"
            >
              <el-option
                v-for="item in userS"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
      </div>

      <!-- 第二行 -->
      <!-- <div class="boxSecond">
        <div class="boxOne">
          <div class="textUserT">提交日期</div>
          <div class="block">
            <el-date-picker
              v-model="timeValue"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </div>
        </div>
        <div class="boxTwo">
          <div style="margin-left: 95px">
            <el-radio-group v-model="radio2">
              <el-radio-button label="今日" />
              <el-radio-button label="昨日" />
              <el-radio-button label="最近7天" />
              <el-radio-button label="最近30天" />
            </el-radio-group>
          </div>
        </div>
        <div class="boxThree"></div>
      </div> -->

      <!-- 第三行 -->
      <div class="thirdly">
        <div class="boxOne">
          <div class="textInquire">精准查询</div>
          <div class="selectorOne">
            <el-select
              v-model="inquire"
              class="m-2"
              placeholder="请选择查询类型"
              size="large"
            >
              <el-option
                v-for="item in userI"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div class="boxTwo">
          <el-input size="large" v-model="input" placeholder="请输入" />
        </div>
        <div class="boxThree">
          <el-button type="primary" @click="onRoom">查询</el-button>
          <el-button @click="onReset()">重置</el-button>
          <!-- <div class="el-icon">
          <el-icon><ArrowUp /></el-icon>
        </div> -->
        </div>
      </div>
    </div>
    <div class="middle">
      <div class="boxTwo">
        <div class="button">
          <p>住户列表</p>
          <div>
            <el-button type="primary" @click="back()"
              >+&nbsp;&nbsp;新建住户</el-button
            >
            <el-button type="default" plain>批量操作</el-button>
          </div>
        </div>
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="35" align="center" />
            <el-table-column prop="id" label="序号" width="60" align="center" />
            <el-table-column
              prop="name"
              label="姓名"
              width="120"
              align="center"
            />
            <el-table-column
              prop="type"
              label="类型"
              width="75"
              align="center"
            />
            <el-table-column
              prop="state"
              label="状态"
              width="120"
              align="center"
            />
            <el-table-column
              prop="identificationNumber"
              label="证件号码"
              width="150"
            />
            <el-table-column
              prop="phoneNumber"
              label="手机号码"
              width="180"
              align="center"
            />
            <el-table-column
              prop="room"
              label="房间"
              width="180"
              align="center"
            />
            <el-table-column label="操作" width="200" align="center">
              <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row.name)">审核</el-button>
                <!-- <el-button size="small" @click="back()">编辑</el-button> -->
                <el-button
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div id="page">
        <Page
          :total="total"
          :count="count"
          :currentPage="page"
          @handleCurrentChange="handleCurrentChange"
          @handleSizeChange="handleSizeChange"
        ></Page>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from "../../utils/http";
import router from "../../router";
import Page from "../../components/Page.vue";
import { ElMessage } from "element-plus";
import timeTrans from "../../utils/time";

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { log } from "console";
import path from "path/posix";

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const radio2 = ref("New York");

const input = ref("");
const tableData = ref([{}]);
const room = ref("");
const timeValue = ref("[]");

const page = ref(1);
const count = ref(5);
const total = ref(5);
const currentPage = page;
const handleSizeChange = (val: number) => {
  count.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  page.value = val;
  getData();
};
const Type = ref("");
const userT = [
  {
    value: " ",
    label: "全部",
  },
  {
    value: "业主",
    label: "业主",
  },
  {
    value: "家属",
    label: "家属",
  },
  {
    value: "租户",
    label: "租户",
  },
  {
    value: "朋友",
    label: "朋友",
  },
  {
    value: "其他",
    label: "其他",
  },
];
const State = ref("");
const userS = [
  {
    value: " ",
    label: "全部",
  },
  {
    value: "1",
    label: "碧桂园",
  },
  {
    value: "2",
    label: "无国界",
  },
];
const inquire = ref("");
const userI = [
  {
    value: "住户姓名",
    label: "住户姓名",
  },
];

// 时间选择器
const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
]);

//连接数据
const getData = () => {
  axios({
    url: "/householdManagement/list",
    method: "get",
    params: {
      totalPage: page.value,
      totalCount: count.value,
      type: Type.value,
      communityId: State.value,
      name: input.value,
      room: room.value,
      startTime: timeValue[0],
      stopTime: timeValue[1],
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      tableData.value = data.data.list;
      total.value = data.data;
    } else {
      ElMessage.error("加载失败！");
    }
  });
};

//删除
let handleDelete = (index) => {
  axios({
    url: "/householdManagement/delete",
    method: "DELETE",
    data: [index],
  }).then(({ data }) => {
    console.log(data);
    if (data.code == 0) {
      getData();
    }
  });
};

//重置
const onReset = () => {
  (Type.value = ""),
    (State.value = ""),
    (input.value = ""),
    (page.value = 1),
    getData();
};

//房间搜索
const onRoom = () => {
  (room.value = "A座1单元305"), 
  getData();
};

//新增
let back = () => {
  router.push("/home/NewHouseholds");
};

let handleEdit = (name) => {
  console.log(name);
  
  router.push({path:'/home/HouseholdDetails',query:{name:name}});
};

onMounted(() => {
  getData();
});
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  margin: 20px 20px 0px 20px;
  .header {
    height: 190px;
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;

    border: 1px solid #e9e9e9;
    background-color: #fff;
    .toper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        margin-top: 30px;
        font-size: 20px;
      }
    }
    .divLine {
      background: #e0e3da;
      width: 100%;
      height: 1px;
      margin-top: 20px;
    }
    .boxFirst {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin-top: 10px;
      // align-items: center;
      // border: solid 1px red;
      .boxOne {
        height: 50px;
        width: 350px;
        margin-left: 20px;
        line-height: 50px;
        // border: solid 1px red;
        .textUserT {
          float: left;
          height: 50px;
          line-height: 50px;
          width: 70px;
          // border: solid 1px red;
        }
        .selectorOne {
          margin-left: 80px;
          // border: solid 1px red;
        }
      }
      .boxTwo {
        height: 50px;
        width: 350px;
        line-height: 50px;
        margin-left: 240px;
        // border: solid 1px red;
        .textUserS {
          float: left;
          height: 50px;
          line-height: 50px;
          width: 70px;
          // border: solid 1px red;
        }
        .selectorTwo {
          margin-left: 80px;
          // border: solid 1px red;
        }
      }
    }
    .boxSecond {
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      // border: solid 1px red;
      .boxOne {
        // border: solid 1px red;
        height: 50px;
        margin-left: 20px;
        line-height: 50px;
        .textUserT {
          float: left;
          height: 50px;
          line-height: 50px;
          width: 70px;
          // border: solid 1px red;
        }

        .block {
          // border: solid 1px red;
          text-align: center;
          border-right: solid 1px var(--el-border-color);
          flex: 1;
          margin-left: 80px;
        }
        .block:last-child {
          border-right: none;
        }
        .block .demonstration {
          display: block;
          color: var(--el-text-color-secondary);
          font-size: 14px;
          margin-bottom: 20px;
        }
      }
    }
    .thirdly {
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center;
      // border: solid 1px red;
      .boxOne {
        // border: solid 1px red;
        height: 50px;
        margin-left: 20px;
        line-height: 50px;
        .textInquire {
          float: left;
          height: 50px;
          line-height: 50px;
          width: 70px;
          // border: solid 1px red;
        }
        .selectorOne {
          margin-left: 80px;
          width: 150px;
        }
      }
      .boxTwo {
        // border: solid 1px red;
        margin-left: 10px;
        width: 300px;
        height: 50px;
        line-height: 50px;
      }
      .boxThree {
        // border: solid 1px red//
        display: flex;
        justify-content: space-between;
        margin-left: 35%;
        .el-icon {
          // border: solid 1px red;
          margin-left: 20px;
          height: 20px;
          line-height: 20px;
        }
      }
    }
  }
  .middle {
    display: flex;
    width: 90%; /*  */
    padding: 15px 0 15px 30px;
    margin: 20px auto;
    border: 1px solid #e9e9e9;
    background-color: #fff;
    .button {
      display: flex;
      justify-content: space-between;
      margin-right: 30px;
      .el-button {
        width: 95px;
        border-radius: 2px;
      }
    }
    .boxTwo {
      .table {
        width: 100%;
        // border: 1px solid red;

        .el-table {
          margin-top: 30px;
          .el-button {
            border: 0;
            background: white;
            color: #1890ff;
          }
        }
      }

      .boxOne {
        float: left;
        .navigation {
          .tac {
            width: 201px;
            border: 1px solid rgb(231, 231, 231);
            .el-sub-menu {
              float: left;
              width: 199px;
            }
          }
        }
      }
    }
  }
}
#page {
  order: 1px solid red;
  width: 95%;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
